<template>
    <div class="index">
        <!-- 头部 -->
        <div class="index-header">
            <!-- <div class="header-left" @click="tanchu_city">
                <span>{{this.$store.state.region}}</span>
                <svg class="icon icon-jia" aria-hidden="true">
                    <use xlink:href="#icon-shang-copy-copy"></use>
                </svg>      
            </div> -->
            <div class="header-middle">
                <img src="~@/assets/logo1.png"/>
            </div>
            <!-- <div class="header-right" @click="popup_search">
                <svg class="icon icon-jia" aria-hidden="true">
                    <use xlink:href="#icon-sousuo"></use>
                </svg> 
            </div> -->
        </div>
        <!-- 轮播 -->
        <mt-swipe :auto="0" class="mint-swipe1" >
            <mt-swipe-item v-for="(item,index) in TopBanners" :key="index">
              <router-link class="ad1" :to="item.url">
                 <img :src="item.cover" />
              </router-link>
            </mt-swipe-item>
        </mt-swipe>
        <!-- 列表分类 -->
        <panel></panel>
      <!-- 推荐职位 -->
        <position-list></position-list>
        <!-- 广告 -->
        <mt-swipe :auto="0" style="height:100px">
            <mt-swipe-item v-for="(item,index) in Ad1" :key="index">
              <router-link class="ad1" :to="item.url">
                 <img :src="item.cover"/>
              </router-link>
            </mt-swipe-item>
        </mt-swipe>
         <!-- 推荐筑功者 -->
        <zgz-list></zgz-list>
        <!-- 广告2 -->
        <mt-swipe :auto="0" style="height:100px">
            <mt-swipe-item v-for="(item,index) in Ad2" :key="index">
              <router-link class="ad1" :to="item.url">
                 <img :src="item.cover"/>
              </router-link>
            </mt-swipe-item>
        </mt-swipe>
        <!-- 推荐项目及列表 -->
        <project-list></project-list>
      
        <!-- 尾部 -->
        <footer-total></footer-total> 
        <!-- 选择城市弹出层-->
        <mt-popup v-model="popupCity" position="top">
           <div class="city-select">
             <!-- 头部 -->
              <mt-header title="选择城市" fixed>
                <a islink slot="left">
                  <mt-button icon="back"  @click.native="turn_back1"></mt-button>
                </a>
                <mt-button  slot="right" class="headusual-2" >
                  <svg class="icon icon-list" aria-hidden="true" @click="popup_search">
                    <use xlink:href="#icon-sousuo"></use>
                  </svg>
                  <svg class="icon icon-fenlei" aria-hidden="true" @click="tanchu_list">
                    <use xlink:href="#icon-fenlei"></use>
                  </svg>           
                </mt-button>    
              </mt-header> 
              <!-- 内容部分 -->
              <div class="city-content">
                <!-- 上部 -->
                <div class="content-hd">
                  <p>
                    <span class="total-country">全国</span>
                    <svg class="icon icon-list" aria-hidden="true">
                      <use xlink:href="#icon-dingwei"></use>
                    </svg>
                    <span>定位失败</span>
                  </p>
                  <p>当前为你推荐全国的内容，您可以切换城市站查看其它城市的内容。</p>
                </div>
                <!-- 下部城市列表部分 -->
                <div class="content-ft">
                  <p class="ft-title">已开通的城市站：</p>
                  <div class="city-list">
                    <ul class="list-group">
                        <li v-for="(item,index) in this.$store.state.filter_Area" :key="index" >
                            <a @click="handleRegion(item.name)" >{{item.name}}</a>
                        </li>
                    </ul>
                  </div>
                </div>
              </div>
           </div>          
        </mt-popup>
         <!-- 头部列表弹出层 -->
        <mt-popup v-model="popupList" position="top" class="tanchu-head">
              <!-- 下面列表 -->
              <div class="list-all">
                <div class="list-group list-group-01">
                    <router-link to="/">
                        <svg class="icon icon-list" aria-hidden="true">
                          <use xlink:href="#icon-shouye-copy"></use>
                        </svg>
                        <p>首页</p>                             
                    </router-link>
                    <router-link to="/zgz">
                        <img src="~@/assets/list-zgz.png"/>
                        <p>筑功者</p>                             
                    </router-link>
                    <router-link to="/projects">
                        <svg class="icon icon-project" aria-hidden="true">
                          <use xlink:href="#icon-fl-gongcheng"></use>
                        </svg>
                        <p>工程项目</p>                             
                    </router-link>
                    <router-link to="/jobs">
                        <svg class="icon icon-position" aria-hidden="true">
                          <use xlink:href="#icon-yingpinzhiwei-copy-01-copy"></use>
                        </svg>
                        <p>职位</p>                             
                    </router-link>
                </div>
                  <div class="list-group">
                    <router-link to="/projects">
                        <svg class="icon icon-list" aria-hidden="true">
                          <use xlink:href="#icon-xiangmuguanli"></use>
                        </svg>
                        <p>项目管理</p>                             
                    </router-link>
                    <router-link to="/user/resume">
                        <svg class="icon icon-list" aria-hidden="true">
                          <use xlink:href="#icon-gonglve-1-copy"></use>
                        </svg>
                        <p>攻略</p>                             
                    </router-link>
                    <router-link to="/user">
                        <img src="~@/assets/list-jineng.png"/>
                        <p>技能</p>                             
                    </router-link>
                    <router-link to="/help">
                        <svg class="icon icon-list" aria-hidden="true">
                          <use xlink:href="#icon-bangzhu-copy-1-copy"></use>
                        </svg>
                        <p>帮助中心</p>                             
                    </router-link>
                </div>

              </div>
        </mt-popup>
        <!-- 搜索框弹出层 -->
        <mt-popup v-model="popupSearch" position="right" class="popup-search">
            <div class="header">
                  <div @click="turn_back" class="header-left">
                      <svg class="icon" aria-hidden="true"  >
                        <use xlink:href="#icon-shang-copy-copy-copy-copy"></use>
                      </svg>
                  </div> 
              <div class="header-middle">
                      <svg class="icon" aria-hidden="true">
                          <use xlink:href="#icon-sousuo"></use>
                      </svg>
                      <input type="text" placeholder="找专业人做专业事儿"/>
              </div>
              <p class="header-right">搜索</p>
          </div>
          <div class="search-tips">
              <p>
                <svg class="icon" aria-hidden="true"  >
                        <use xlink:href="#icon-shijian"></use>
                </svg>
                <span v-show="tipsShow">最近搜索</span>
                <span v-show="!tipsShow">暂无搜索记录</span>
              </p>
              <p class="tips-delete" @click="delete_tips" v-show="tipsShow">
                <svg class="icon" aria-hidden="true"  >
                        <use xlink:href="#icon-shanchu"></use>
                </svg>
              </p>
          </div>
          <ul class="search-list" v-if="tipsShow">
            <li><span>工地改建</span></li>
            <li><span>工地改建</span></li>
            <li><span>工地改建</span></li>
            <li><span>工地改建</span></li>
            <li><span>工地改建</span></li>
            <li><span>工地改建</span></li>
            
          </ul>
        </mt-popup>
    </div>
</template>
<script>
import panel from '@/pages/homeControl/panel'
import projectList from "@/pages/homecontrol/project";
import zgzList from "@/pages/homecontrol/zgz";
import positionList from "@/pages/homeControl/position";
import { Lazyload } from 'mint-ui';
import { GetAds } from "@/api/index";

export default {
  data() {
    return {
     TopBanners:[],
     Ad1:[],
     Ad2:[],
     popupCity:false,   //城市列表弹出层
     popupList:false,   //下拉列表弹出层
     popupSearch:false, //搜索框弹出层
     tipsShow:true
    };
  },
  created() {
    this._GetAds();
  },
  methods: {
    handleRegion(value){
       addCookie("zgz_region", value, 30);
       this.$store.state.region = value;
       this.popupCity=false;
    },
    _GetAds() {
        this.$indicator.open();
      GetAds().then(res => {
        if (res.StatusCode === 200) {
          this.TopBanners = res.Data.TopBanners;
          this.Ad1 = res.Data.Ad1;
          this.Ad2 = res.Data.Ad2;
            this.$indicator.close();
        }
      });
    },
    // 城市弹出层
    tanchu_city(){
      this.popupCity=true;
      this.$store.commit('movePrevent');
      
    },
    // 下拉列表弹出层
    tanchu_list(){
      this.popupList=!this.popupList;
    },
    //返回首页，关闭所有弹出层
    turn_back1(){
      this.popupCity=false;
      this.popupList=false;
      this.$store.commit('exitPrevent');
    },
     //弹出搜索框
    popup_search(){
      this.popupSearch=true;
      this.$store.commit('movePrevent');
    },
    //搜索框关闭，返回上一层
    turn_back(){
      this.popupSearch=false;
    },
    //删除浏览记录
    delete_tips(){
      this.tipsShow=false;

    }
  },
  components: { projectList, zgzList, positionList,panel }
};
</script>

<style scoped lang="scss">
// img[lazy=loading] {
//  width: 40px;
//   height: 300px;
//   margin: auto;
// }
.index {
  border-bottom: 100px solid #f4f4f4;
}
/* 头部 */
.index-header {
  height: 52px;
  background: #ffffff;
  padding: 0 12px;
  position: fixed;
  width: 100%;
  display: flex;
  justify-content: center;
  align-items: center;
  top:0;
  left:0;
  z-index: 999;
  box-shadow: 0 0 5px rgba(0,0,0,.25);
  .header-left {
  
  line-height: 52px;
  display: flex;
  align-items: center;

}
.header-left > span {
  font-size: 16px;
  color: #282828;
  display: flex;
  margin-right: 5.3px;
 
}
.header-left > .icon {
  font-size: 16px;
 
}
.header-middle {
  
  width: 80px;
  height: 32px;
 
 
}
.header-middle > img {
  max-width: 100%;
  max-height: 100%;
  vertical-align: middle;
}

.logo-title {
  width: 49.3px;
  height: 6.67px;
}
.header-right {
 
}
.header-right > .icon {
  font-size: 18px;
}
}

/* 轮播图 */
.swipe-container {
  height: 220px;
}
.swipe-container > img {
  width: 414px;
  height: 220px;
}

// 轮播图
.mint-swipe1 {
  width: 100%;
  height: 220px;
  margin-top: 52px;
}
img {
  width: 100%;
  height: 220px;
  display: block;
}
/* 推荐项目 */
.project-recommendation {
  height: 42.6px;
  overflow: hidden;
  border-top: 10px solid #f4f4f4;
  padding: 0 12px;
  border-bottom: 1px solid #f4f4f4;
  display: flex;
  align-items: center;
  justify-content: space-between;
  > :first-child {
    font-size: 16px;
    color: #282828;
  }
  > :last-child {
    font-size: 14px;
    color: #999999;
    > span {
      float: left;
      display: block;
    }
    > .icon {
      display: block;
      float: left;
      margin-top: 3px;
    }
  }
}
// 广告1
.ad1 {
  height: 100px;
  width: 100%;
  border-bottom: 10px solid #f4f4f4;
  img {
    max-height: 100%;
    max-width: 100%;
    vertical-align: middle;
  }
}
// 城市弹出层
.mint-popup{
  width: 100%;
  // height: 100%;
}

.city-select{
  background: #f4f4f4;
  height: 692px;
  // 头部
    .mint-header {
      background: white;
      color: #282828;
      font-size: 18px;
      height: 44px;
      border-bottom: 1px solid #f4f4f4;
      .headusual-2 {
        width: 100px;
        text-align: right;
        .icon {
          display: block;
          float: left;
        }
        .icon-list {
          margin-right: 25px;
          margin-left: 30.67px;
        }
      }
    }
  
   .city-content{
     padding: 13px 12px;
     margin-top: 44px;
      .content-hd{
        height: 121.3px;
        background: url('~@/assets/city_bg.png') no-repeat center center; 
        background-size: 390px 121.3px;
        padding: 11px 12px;
        border-radius: 5px;
          p{
            display: flex;
            align-items: center;
            font-size: 14px;
            color:#ffffff; 
            margin-bottom: 8px;
            .total-country{
              font-size: 16px;
              font-weight: bolder;
            }
            .icon{
              margin:0 6px;
            }  
          }
      }
      .content-ft{
        margin-top:29.6px;
          .ft-title{
            color:#282828;
            font-size: 16px;
          }
          .city-list{
            margin-top:13px;
            .list-group{
              width: 100%;
              display: flex;
              text-align: center;
              flex-wrap: wrap;
              li{
                flex:0 0 25%;
                height: 29.3px;
                font-size: 14px;
                color:#666666;
                margin-bottom: 13px;
                display: flex;
                justify-content: center;
                a{
                  display: block;
                  width: 86.6px;
                  height: 29.3px;
                  line-height: 29.3px;
                  background: #ffffff;
                }
              }
            }
          }

      }
   }
}
// 头部列表弹出层
.tanchu-head{
  top:44px;
  // 头部
    .mint-header {
      background: white;
      color: #282828;
      font-size: 18px;
      height: 44px;
      border-bottom: 1px solid #f4f4f4;
      .headusual-2 {
        width: 100px;
        display: flex;
        align-items: center;
        .icon-list {
          margin-right: 25px;
          margin-left: 30.67px;
        }
        .icon-fenlei{
          font-size: 22px!important;
        }
        
      }
    }
   
   .mint-header-title{
     color:#fd4f00;
     font-size: 18px;
   }
   .list-all{
  padding: 14px 20px;
  .list-group{
    display: flex;
    align-items: center;
    justify-content: space-around;
    text-align: center;
    a{
      flex:0 0 20%;
      display: flex;
      flex-direction: column;
      align-items: center;
      display: block;
      text-align: center;
      img{
        width: 32.6px;
        height: 36px;
        display: block;
        margin:0 auto;
         margin-bottom: 20px;
      }
      p{
        color:#282828;
        font-size: 14px;
      }
      .icon{
        font-size: 38px;
        color:#3887fe;
        margin-bottom: 13px;
      }
      // .icon-project{
      //   font-size: 40px;
      // }
      // .icon-position{
      //   font-size: 40px;
      // }
    }
  }
  .list-group-01{
    margin-bottom: 28px;
  }
}

}

//搜索框弹出层
.popup-search{
  height: 100%;
    /* 头部 */
.header{
    height: 44px;
    display: flex;
    align-items: center;
    background: #eeeeee;
   
}
.header-left{
  width: 40px;
  margin-left:5px;
  .icon{
       font-size: 25px;
  }
   
   
}
.header-middle{ 
    margin-left:15px;
    width: 299.6px;
    height: 29.3px;
    background: #ffffff;
    border-radius:3px;
    display: flex;
    align-items: center;

}
.header-middle>.icon{
    font-size: 16px;
    margin-left:6px;
    margin-right:10px;
    color:#999999;
}
.header-middle>input{
    
    color:#999999;
    font-size: 14px;
    width: 261.3px;
    
    border:none;
    
    
}
.header-right{
    margin-left:11px;
    color:#999999;
    font-size: 14px;
    height: 44px;
    line-height: 44px;
}
.search-tips{
  margin-top:14px;
  margin-left:11px;
  margin-right: 11px;
  display: flex;
  font-size: 14px;
  color:#666666;
  justify-content: space-between;
    p{
      display: flex;
      align-items: center;
      span{
        margin-left: 7px;
      }
    }
    .tips-delete{
      width: 20px;
      height: 20px;
      text-align: center;
    }
}
.search-list{
  padding: 16px 11px ;
  display: flex;
  flex-wrap: wrap;
  
  
    li{
      flex:0 0 25%;
      display: flex;
      text-align: center;
      margin-bottom: 10px;
      justify-content: center;
      span{
        width: 87px;
        height: 29px;
        line-height: 29px;
        display: block;
        background: #eeeeee;
        
      }
    }

}
}
.city-select .icon-fenlei{
  font-size: 20px;
  margin-top: -2px;
}

</style>
